import styles from "@styles/infinite.module.less";
import { useInView } from "react-intersection-observer";
import { useEffect, useState } from "react";

interface Props {
  // 是否有更多数据可以加载
  hasMore: boolean;
  // 用于加载更多数据的方法
  loadMore: () => Promise<any>;
}

export default function Infinite({ hasMore, loadMore }: Props) {
  // ref: 和要监听的元素进行绑定
  const { ref, inView } = useInView();
  // 用于表示是否正在加载
  const [loading, setIsLoading] = useState(false);

  useEffect(() => {
    // 如果元素进入到了可视区, 并且没有正在加载数据, 并且有更多数据可以加载
    if (inView && !loading && hasMore) {
      // 表示正在加载, 锁
      setIsLoading(true);
      // 可以发送请求加载下一页的数据了
      // requestIdleCallback 等待浏览器空闲时执行
      loadMore().finally(() => requestIdleCallback(() => setIsLoading(false)));
    }
  }, [hasMore, inView, loadMore, loading]);

  return (
    <div ref={ref} className={styles.container}>
      {loading && "数据拼命加载中..."}
      {!hasMore && "没有更多数据了..."}
    </div>
  );
}
